<style>
.upload .el-dialog{
    background: transparent;
    -webkit-box-shadow: 0 0 0 0;
    box-shadow: 0 0 0 0;
}
.el-upload-dragger {
    width: 100%;
    height: 100%;
    border: 0;
}

.small .el-upload--picture-card{
    line-height: 85px;
     width: 80px;
     height: 80px;
}
.upload .el-dialog__close{
    display: none;
}
.upload .el-dialog__body{
    text-align: center;
}
.upload.disabled .el-upload{
    display: none;
}

.upload.disabled .el-upload-list__item-status-label{
    display: none!important;
}

.upload-replace{
    position: absolute;
    line-height: 12px;
    right: 0;
    left: 0;
    color: #fff;
    opacity: 0.6;
    padding: 3px;
    font-size: 12px;
    background: #000000;
    bottom: 0;
}
.single-uploaded-element .icon-delete{ display: none; }
.single-uploaded-element:hover .icon-delete{ display: inline; }
</style>
<template>
  <div  class="upload" :class="{'disabled':disabled,'small':size=='small'}">
    <el-upload
            ref="upload"
            :disabled="disabled"
            action="/upload/pic"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :before-upload="beforeUpload"
            :on-progress="onUploading"
            :on-success="handleSuccess"
            :show-file-list="limit!=1"
            multiple
            :limit="limit"
            drag
            :accept="this.accept"
            :with-credentials='true'
            :on-exceed="handleExceed"
            :file-list="fileList"
            list-type="picture-card">
        <i  v-if="value&&(limit>1||!value.url)"  class="el-icon-plus"></i>
        <div v-if="value&&(limit==1&&value.url)" class="single-uploaded-element ly-img avatar" style="width: 100%; height: 100%" :style="{backgroundImage: 'url('+(value.url+image_back)+')'}">
            <span class="icon-delete" @click.stop="deleteVideo"></span>
        </div>
        <span v-if="value&&(limit==1&&value.url)"  class="upload-replace">点击替换</span>
    </el-upload>
    <el-dialog  :visible.sync="dialogVisible" center>
        <div @click="dialogVisible=false">
            <img style="max-width: 80%;"  :src="dialogImageUrl" alt="">
        </div>
    </el-dialog>
  </div>
</template>
<script>
Rap.define({
    props: {
        size:{
            'default':'normal'
        },
        disabled:{
            'default': false
        },
        value:{
            'default': function () {
                return []
            }
        },limit:{
            'default': 1
        },
        accept:{
            'default': 'image/*;video/*'
        }
    },
    watch:{
      'value':function (value) {
          if(typeof(value)=='string'&&value){
              value=[{url:value}];
              if(this.limit==1){
                  this.$emit('input', value[0]);
              }else{
                  this.$emit('input', value);
              }
              return;
          }
          this.fileList.length=0;
          var me=this;

          if(value){
              if(this.limit==1){
                  var url= value.url;
                  if(url.indexOf('mp4')>0){
                     this. image_back='?x-oss-process=video/snapshot,t_1000,m_fast';
                  }else{
                      this. image_back="";
                  }
                  value.url=url;

              }else{
                  _.each(value,function (item) {
                      if(item.url.indexOf('mp4')>0){
                          item.url+='?x-oss-process=video/snapshot,t_1000,m_fast';
                      }
                      me.fileList.push(item);
                  });
              }
          }
      }
    },
    data:function () {
        return {
            image_back:'',
            fileList:[],
            dialogImageUrl: '',
            dialogVisible: false,
            loadingLayer: null
        };
    },
    methods:{
        deleteVideo: function (){
            this.value.url = '';
        },
        onUploading: function (){
            this.loadingLayer = this.$loading({
                lock: true,
                text: '正在上传中',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
            });
        },
        handleSuccess:function(res, file,fileList) {
            var me = this;
            setTimeout(function (){
                me.loadingLayer.close();
            }, 400);
            if(_.find(fileList,{status:'uploading'})){
                return;
            }

            var value=[];
            _.each(fileList,function (item) {
                  if(item.response){
                          var url=item.response['url'];
                          url=url.replace("?x-oss-process=video/snapshot,t_1000,m_fast","");
                      item.response['url']=url;
                      value.push(item.response);
                  }else{
                      if(item.url.indexOf('mp4')>0){
                          item.url=item.url.replace("?x-oss-process=video/snapshot,t_1000,m_fast","");
                      }
                      value.push(item);
                  }
            });
            this.$refs.upload.clearFiles();
            if(this.limit==1){
                this.$emit('input', value[0]);
            }else{
                this.$emit('input', value);
            }
        },
        handleRemove:function(file, fileList) {
            var search={
                url:file.url
            };
            if(file.type){
                search.type=file.type
            }
           var item= _.find(this.value,search);
            if(this.limit>1){
                this.value.remove(item);
            }
            this.$emit('input', this.value)
        },
        handlePreview:function(file) {
            if(file.url.indexOf('mp4')>0){
               var url= file.url.replace("?x-oss-process=video/snapshot,t_1000,m_fast","");
                window.open(url);
                return;
            }
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        },
        handleExceed:function(files, fileList) {
                App.$message.warning('当前限制选择 '+this.limit+' 个文件，本次选择了 '+files.length+' 个文件，共选择了'+(files.length+fileList.length)+ '个文件');
        },
        beforeUpload:function(file) {
             if(file.type.indexOf('video')>-1){
                     var isLt2M = file.size / 1024 / 1024 <10;
                 if (!isLt2M) {
                     this.$message.error('上传视频大小不能超过 10MB!');
                 }
                 return isLt2M;
             }else{
                 var isLt2M = file.size / 1024 / 1024 <2;
                 if (!isLt2M) {
                     this.$message.error('上传图片大小不能超过 2MB!');
                 }
                 return isLt2M;
             }

        }
    }
})


</script>